<template>
  <div class="main">
    <div class="banner">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="item in imgDate" :key="item.id"><img :src="item.ad_logo"></mt-swipe-item>
        </mt-swipe>
    </div>
    
    <div class="item">
      <p class="title">
        <i class="icon1"></i><span>比赛</span>推荐 <router-link tag="a" to="/basket">更多比赛</router-link>
      </p>
      <vLoading v-if="!static"></vLoading>
      <vItem v-if="static" :date="this.list"></vItem>
    </div>
  </div>
</template>

<script>
import {Get,Post,Put,Del} from '@/api/index.js'
import vItem from '@/components/List.vue'
import vLoading from '@/components/Loading.vue'

import Vue from 'vue';
import { Swipe, SwipeItem } from 'mint-ui';



Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

export default {
  name: 'HelloWorld',
  data () {
    return {
      static:false,
      list:[],
      imgDate:[]
    }
  },
  components:{
    vItem,vLoading
  },

  mounted(){
    this.getData()
    this.getAds()
  },
  //&match_time_start=2017-10-19
  methods:{
    async getData(){
        let reg=await Get('/sport/match?_include=home_crop,away_crop,sport_match_set&is_show=2',this.$store.state.token)
        console.log(reg)
        this.list=reg.data
        this.static=true
    },
    async getAds(){
        let reg=await Get('/ads',this.$store.state.token)
        this.imgDate=reg.data
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
